<template>
  <pull-to @infinite-scroll="loadmore" v-loading="loading">
    <div class="product">
      <ul class="ul-flex">
        <li class="left-li">
          <p class="status-left">状态</p>
        </li>
        <li class="right-li">
          <el-row>
            <el-col :span="10">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane v-for="item in tabsName" :label="item" :name="item" :key="item.key" />
              </el-tabs>
            </el-col>
            <el-col :span="14" style="text-align:right;margin-top:8px">
              <el-date-picker
                class="display-screen"
                size="mini"
                style="width:200px;margin-right:12px"
                v-model="timeBegin"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="timeChange"
                :default-time="['00:00:00', '23:59:59']"
              >
              </el-date-picker>
              <el-input
                size="mini"
                style="width: 220px"
                placeholder="搜索关键词"
                prefix-icon="el-icon-search"
                v-model="fromParams.keyWord"
                @keyup.enter.native="search"
              >
                <el-button size="small" slot="append" @click="search">搜索</el-button>
              </el-input>
            </el-col>
          </el-row>
        </li>
      </ul>
      <div class="product-content">
        共 {{ fromParams.total }} 条内容
        <post-card v-for="card in postList" :postInfo="card" :key="card.key" @deleteSucc="deleteSucc" />
        <div class="no-thing" v-if="postList.length === 0">
          <img src="https://mokr.oss-cn-hangzhou.aliyuncs.com/custom/empty.png" alt="" />
          <p class="no-title">{{ emptyMsg }}</p>
          <router-link to="/uploadArticle"><el-button size="small" type="danger" v-if="activeName == '全部'">马上发布</el-button></router-link>
        </div>
        <div class="no-more" v-if="postList.length > 0 && nomoreFlag">没有更多了</div>
      </div>
    </div>
  </pull-to>
</template>

<script>
import PostCard from './post-card';
import PullTo from '@/components/VuePullTo';
import { queryPostList } from '../api';

export default {
  components: { PostCard, PullTo },
  data() {
    return {
      timeChange: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 3600 * 1000 * 24 * 183 || time.getTime() > Date.now(); //选择时间范围
        }
      },
      loading: false,
      nomoreFlag: false, // true表示没有更多数据
      activeName: '全部',
      tabsName: ['全部', '已发布', '审核中', '未通过'],
      timeBegin: '',
      fromParams: {
        keyWord: '',
        pageIndex: 0,
        beginTime: '',
        endTime: '',
        total: 0
      },
      postList: [] // 帖子列表
    };
  },
  computed: {
    emptyMsg() {
      switch (this.activeName) {
        case '全部':
          return '你还没有发布过内容～';
        case '已发布':
        case '审核中':
        case '未通过':
          return '没有符合条件的内容';
        default:
          return '你还没有发布过内容';
      }
    }
  },
  watch: {
    timeBegin() {
      if (this.timeBegin) {
        this.fromParams.beginTime = this.$moment(this.timeBegin[0], 'YYYY-MM-DD HH:mm:ss').valueOf();
        this.fromParams.endTime = this.$moment(this.timeBegin[1], 'YYYY-MM-DD HH:mm:ss').valueOf();
      } else {
        this.fromParams.beginTime = '';
        this.fromParams.endTime = '';
      }
      this.fromParams.pageIndex = 0;
      this.postList = [];
      this.queryPostList();
    }
  },
  created() {
    this.queryPostList();
  },
  methods: {
    deleteSucc() {
      this.postList = [];
      this.queryPostList();
    },
    loadmore() {
      if (!this.nomoreFlag) {
        this.fromParams.pageIndex++;
        this.queryPostList();
      }
    },
    queryPostList() {
      let params = {
        pageSize: 10,
        pageIndex: this.fromParams.pageIndex,
        keyWord: this.fromParams.keyWord,
        beginTime: this.fromParams.beginTime,
        endTime: this.fromParams.endTime
      };
      this.loading = true;
      queryPostList(params).then(res => {
        this.loading = false;
        if (res.success) {
          this.postList = this.postList.concat(res.data.pageData || []);
          this.fromParams.total = res.data.total || 0;
          if (res.data.pageData.length < 10) {
            // 没有更多数据了
            this.nomoreFlag = true;
          }
        }
      });
    },
    handleClick() {
      switch (this.activeName) {
        case '全部':
        case '已发布':
          this.postList = [];
          this.fromParams.pageIndex = 0;
          this.queryPostList();
          break;
        case '审核中':
        case '未通过':
          this.fromParams.total = 0;
          this.postList = [];
          break;
      }
    },
    search() {
      this.fromParams.pageIndex = 0;
      this.postList = [];
      this.queryPostList();
    }
  }
};
</script>
<style lang="scss" scoped>
.product {
  position: relative;
  min-height: 86vh;
  background: #fff;
  padding: 28px 32px 60px;
  .ul-flex {
    display: flex;
    .left-li {
      flex: 0 0 38px;
      text-align: center;
      .status-left {
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        color: #999;
      }
    }
    .right-li {
      flex: 1;
    }
  }
  .product-content {
    font-size: 15px;
    color: #666;
    .no-thing {
      margin-top: 168px;
      text-align: center;
      img {
        width: 140px;
        height: 140px;
      }
      .no-title {
        height: 48px;
        line-height: 48px;
        font-size: 14px;
        color: #666;
      }
    }
    .no-more {
      margin-top: 28px;
      text-align: center;
      font-size: 14px;
      color: #999;
    }
  }

  @media screen and (max-width: 1200px) {
    .display-screen {
      display: none;
    }
  }
}
</style>
